<template>
<div style="position:relative;">
    <div id="muke-list">
        <div id="muke-list-content">
            <ul class="nav nav-pills nav-stacked">
                <!-- <li class="active"><a href="#">全部文件</a></li> -->
                <li><router-link to="/main/cloud-disk/files">
                    <i class="el-icon-folder"></i> 全部文件</router-link>
                </li>
                <li><router-link to="/main/cloud-disk/share">
                    <i class="el-icon-share"></i> 我的分享</router-link>
                </li>
                <li><router-link to="/main/cloud-disk/recycle">
                    <i class="el-icon-delete"></i> 回收站 
                    <!-- <span class="label label-badge label-success">4</span> -->
                    </router-link>
                </li>
                <!-- <li><a href="#" >get</a></li>
                <li><a href="#">ITEM</a></li> -->
            </ul>
        </div>
        <div id="container" style="">

        </div>

        
    </div>
    <!-- 路由页面 -->
    <div>
        <router-view/>
    </div>

 </div>   
</template>

<script>
    import util from '../../utils/util';
    
    export default {
        data() {
            return { 
               json:{}
            }
        },
        methods:{
            
            async initHighChart(){
                
                var chart = {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    // 去掉图表背景颜色
                    backgroundColor:null
                };
                var title = {
                    text: '磁盘使用情况'   
                };      
                var tooltip = {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' +
										'<br/><b>{point.size}</b>'
                };
                var plotOptions = {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false           
                        },
                        showInLegend: true
                    }
                };
                var series= [{
                    type: 'pie',
                    name: '百分比',
                    data: [
                        {
                            name: '未使用',
                            y: 20
                        },
                        {
                            name: '已使用',
                            y: 80 
                        }
                    ]
                }]; 
                Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
                    return {
                        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                        stops: [
                            [0, color],
                            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                        ]
                    };
                });    
                      
                  
                this.json.chart = chart; 
                this.json.title = title;     
                this.json.tooltip = tooltip;  
                this.json.series = series;
                this.json.plotOptions = plotOptions;

                await this.$axios.get(util.API_HOST + '/file/file/total/size')
                .then(response => {
                    let result = response.data;
                    this.diskData = result.data;
                    series[0].data = this.diskData; 
                    
                }).catch(err => {

                })

                $('#container').highcharts(this.json);
                
            }
        },
        mounted(){
            this.initHighChart();
            
        }
        
        
    }

      
</script>

<style scoped>
    #container{
        width: 240px; height: 240px; margin: 0 auto;
        position: absolute;
        bottom: 0;
    }
    #muke-list{
        float: left;
        width: 240px;
        height: 100vh;
        min-height: 500px;
        position: relative;
        /* background-color: #D0E0F1; */
        /*border-right: #026C7A solid 1px;*/
        box-shadow: darkgray 0px 0px 3px;
    }
    #muke-list-content{
        /* width: 240px; */
        margin: 20px 20px 0px 20px;
    }
</style>